{% extends "base.html" %}

{% block head %}
<meta http-equiv="refresh" content="30">
{% endblock %}

{% block title %}
	监控信息
{% endblock %}

{% block content %}    
{% load key %}

<script type='text/javascript'>
     $(document).ready(function () {
     if ($("[rel=tooltip]").length) {
     $("[rel=tooltip]").tooltip();
     }
   });
</script>

<style>
        .table th, .table td {vertical-align:middle;}
	.popover {max-width: 1000px; width: auto;}
</style>

<div>
<table class="table table-bordered table-striped table-hover">
	<tr>
		<td colspan=5>当前系统时间: {{ nowtime }}</td>
	</tr>
	<tr>
		<td>数据刷新时间: {{ gettime }}</td>
		<td>获取数据耗时: {{ lastmonitor|key:'get_time' }}s</td>
		<td>节点: {{ lastmonitor|key:'nodes' }}</td>
		<td>项目: {{ lastmonitor|key:'projects' }}</td>
		<td>刷新间隔: {{ lastmonitor|key:'interval' }}s</td>
	</tr>
</table>
<table class="table table-bordered table-striped table-hover">
	<tr>
		<th>Node</th>
                {% for monitor in monitorlist %}
                    {% if monitor in imgmonitor %}
                <th><a href="/monitor/images/monitor/?monitor={{ monitor }}">{{ monitoralias|key:monitor|key:'monitoralias' }}</a></th>
                    {% else %}
                <th>{{ monitoralias|key:monitor|key:'monitoralias' }}</th>
                    {% endif %}
                {% endfor %}
	</tr>

        {% for host in badhostlist %}
           <tr class="error">
                 <td><a class="hostpopover" href="/monitor/images/host/?host={{ host }}" rel="popover" data-original-title="{{ host }} 的详细信息" data-content=
		"<table>
           {% for monitor in alldata|key:host %}
                {% ifequal monitor 'get_time' %}
                {% else %}
                <tr><td>{{ monitoralias|key:monitor|key:'monitoralias' }}</td><td>{{ alldata|key:host|key:monitor|key:'info' }}</td></tr>
                {% endifequal %}
           {% endfor %}
		</table>"

           data-placement="right">
		{{ host }}
		</a></td>

           {% for monitor in monitorlist %}
              {% if monitor in alldata|key:host %}
                 <td><font style="color:{{ alldata|key:host|key:monitor|key:'color' }};">{{ alldata|key:host|key:monitor|key:'status' }}</font></td>   
              {% else %}
                 <td><font style="color:blue;">未启用</font></td>
              {% endif %}
           {% endfor %}
           </tr>
        {% endfor %}
        {% for host in okhostlist %}
           <tr class="success">
                 <td><a class="hostpopover" href="/monitor/images/host/?host={{ host }}" rel="popover" data-original-title="{{ host }} 的详细信息" data-content=
		"<table>
           {% for monitor in alldata|key:host %}
                {% ifequal monitor 'get_time' %}
                {% else %}
                <tr><td>{{ monitoralias|key:monitor|key:'monitoralias' }}</td><td>{{ alldata|key:host|key:monitor|key:'info' }}</td></tr>
                {% endifequal %}
           {% endfor %}
		</table>"
	
	   data-placement="right">
		{{ host }}
		</a></td>

           {% for monitor in monitorlist %}
              {% if monitor in alldata|key:host %}
                 <td><font style="color:{{ alldata|key:host|key:monitor|key:'color' }};">{{ alldata|key:host|key:monitor|key:'status' }}</font></td>   
              {% else %}
                 <td><font style="color:blue;">未启用</font></td>
              {% endif %}
           {% endfor %}
           </tr>
        {% endfor %}
</table>

{% if lastmonitor|key:'errorinfo' %}
<table class="table table-bordered table-striped table-hover table-condensed">
	<tr class="error">
		<td colspan=2>错误信息: </th>
	</tr>		
        {% for i in lastmonitor|key:'errorinfo' %}
            <tr>
                <td style="text-align: center;">{{ forloop.counter }}</td>
		<td>{{ i }}</td>
            </tr>
        {% endfor %}
</table>
</div>
{% endif %}

<script type="text/javascript">
$('.hostpopover').popover({html:true});

$('.hostpopover').mouseover(function(event){
        $(event.target).popover('show')
});
$('.hostpopover').mouseleave(function(event){
        $(event.target).popover('hide')
});
</script>


{% endblock %}
